<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="./style.css">
		<script src="../src/vue.js"></script>
		<script type="text/x-template" id="modal-temp">
			<div v-transform-body v-show="value" class="modal-example">
				<!-- <div class="mask"></div> -->
	        	<div class="modal">
					<div class="modal-header">
						<slot name='header'>
							<h4>{{title}}</h4>
						</slot>

					</div>
					<div class="modal-content">
						<div>
							<slot name="content">在这里添加内容</slot>
						</div>
					</div>
					<div class="modal-footer">
						<slot name="footer">
							<input class="btn" @click="okHandle"
							type="button" :value="okValue"  
							/>
							<input  @click="cancelHandle"
							class="btn" type="button" :value="cancelValue" />
						</slot>
					</div>
	        	</div>
	      	</div>
		</script>
	</head>

	<body>
		
      	<div id="app">
      		<button @click="show=true">登录</button>
      		<p>{{show}}</p>
      		<modal v-model="show" title="登录"></modal>
      	</div>
		<script>
			// 单项数据流 父组件传递给子组件数据，子组件不能更改父组件的数据
			// 和组件的双向绑定
			Vue.directive('transform-body',{
				inserted(el){
					document.body.appendChild(el);
				}
			})
			Vue.component('Modal',{
				props:{
					value:{
						type: Boolean,
						default: false
					},
					title:{
						type: String,
						default: '默认标题'
					},
					okValue:{
						type: String,
						default: '确定'
					},
					cancelValue:{
						type: String,
						default: '取消'
					}
				},
				template: '#modal-temp',
				methods: {
					okHandle () {
						this.$emit('ok-click1');
						this.$emit('input',false)
					},
					cancelHandle () {
						this.$emit('cancel-click')
						this.$emit('input',false)
					}
				}
			})
			new Vue({
				el:'#app',
				data:{
					show: true
				}
			})
		</script>
	</body>
</html>
